const HtmlWebpackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem-exclude");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// webpack配置采用commonJS规范，通过module.export导出一个描述如何构建的 Object 对象。
module.exports = {
  mode: "none",
  devtool: "cheap-module-eval-source-map",
  entry: "./src/index.js", //入口配置*
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js"],
    alias: {
      "@": path.resolve("./src"),
    },
  },
  output: {
    filename: "[name]-[hash:8].js",
    chunkFilename: "[name]-[id]aaa.js",
  }, //出口配置*
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                require.resolve("@babel/preset-react"),
                [
                  require.resolve("@babel/preset-env"),
                  {
                    targets: {
                      browsers: ["last 4 versions", "ie >= 9", "safari >= 10"], // "last 2 Chrome versions",
                    },
                    useBuiltIns: "entry",
                    corejs: 3,
                    loose: true,
                  },
                ],
                "@babel/preset-typescript",
              ],
              // plugins: [require.resolve("react-refresh/babel")], // 为 react-refresh 添加
              plugins: [
                [
                  require.resolve("@babel/plugin-proposal-decorators"),
                  { legacy: true },
                ],
                [
                  require.resolve("@babel/plugin-proposal-class-properties"),
                  { loose: true },
                ],
                [require.resolve(path.resolve("./plugin/babelPlugin.js"))], // 给图片添加懒加载属性
                [
                  "babel-plugin-import",
                  {
                    libraryName: "lodash",
                    libraryDirectory: "fp",
                  },
                  "lodash",
                ],
              ],
            },
          },
        ],
      },
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                autoprefixer({
                  overrideBrowserslist: [
                    "last 2 versions",
                    "Firefox ESR",
                    "> 1%",
                    "ie >= 8",
                    "iOS >= 8",
                    "Android >= 4",
                  ],
                }),
                px2rem({
                  remUnit: 75,
                }),
              ],
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "imgs/[name]-[hash:8].[ext]",
              limit: 8240,
            },
          },
          {
            loader: "@game/image-webpack-loader", // 对图片做压缩
            options: {
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.3, 0.8],
                speed: 1,
              },
              mozjpeg: {
                quality: 65,
                progressive: true,
              },
            },
          },
        ],
      },
    ],
  }, //module.rules loader
  plugins: [
    // new ReactRefreshPlugin(), // 为 react-refresh 添加
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      title: "react Demo",
      srcName: "srcName",
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css", // [name]为chunk名称
    }),
    new webpack.DefinePlugin({
      "process.app": {
        NODE_ENV: process.env.NODE_ENV,
      },
    }),
    // new ForkTsCheckerWebpackPlugin({
    //   formatter: "codeframe",
    //   async: false, // 同步等待检查结果
    // }),
  ], //插件
  devServer: {
    port: 8888,
    hot: true,
  }, //开发服务器
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },
};
